import React from 'react';
import { Badge, Button } from 'antd';
import { tagList } from "../../../config/tagList"
export const FirstLine = () => {
    let data = Array(8).fill(1).map((item, index) => {
        return (
            <Button type="link" style={{ color: "black", padding: "0", lineHeight: "21px", height: "21px" }} key={index}>
                {tagList[index].translatedName}
                <Badge count={tagList[index].questionCount} overflowCount={9999} style={{ backgroundColor: "#F2F3F4", color: "black" }} />
            </Button>
        )
    })
    return (
        <>
            {
                data
            }
        </>
    )
}

export const AllLine = () => {
    return (
        <>
            {
                tagList.map((item, index) => (
                    <>
                        {
                            index > 8 ?
                                <>
                                    <Button type="link" style={{ color: "black", padding: "0", lineHeight: "21px", height: "21px" }} key={index}>
                                        {item.translatedName}
                                        <Badge count={item.questionCount} overflowCount={9999} style={{ backgroundColor: "#F2F3F4", color: "black" }} />
                                    </Button>
                                    {
                                        index % 8 == 0 ? <br /> : ""
                                    }
                                </>
                                : ""
                        }

                    </>
                ))
            }
        </>
    )
}